<template>
  <div class="retrain-statistics-container">
    <div class="process-box flex-around">
      <div
        class="process-item flex-column"
        v-for="(process, index) in processList"
        :key="index"
      >
        <el-progress
          :stroke-width="14"
          type="circle"
          :percentage="index === 3 ? 100 : process.num"
        >
          {{ process.num }} {{ process.unix }}
        </el-progress>
        {{ process.text }}
      </div>
    </div>
    <div class="retrain-search flex">
      <el-input
        class="class-name"
        placeholder="学生姓名"
        :suffix-icon="Search"
        @input="onNameChange"
        v-model="retrainSearch.studentName"
      ></el-input>
      <div class="right-rate">
        <p class="tip">得分率</p>
        <div class="input-box">
          <el-input-number
            placeholder="最低"
            :controls="false"
            :min="0"
            v-model="retrainSearch.low_rate"
            @input="onChangRate"
          ></el-input-number>
          <span class="separator">—</span>
          <el-input-number
            placeholder="最高"
            :controls="false"
            :max="100"
            v-model="retrainSearch.high_rate"
            @input="onChangRate"
          ></el-input-number>
        </div>
      </div>
    </div>
    <el-table :data="filterList" class="retrain-table" v-loading="loading">
      <el-table-column prop="student_name" label="姓名" />
      <el-table-column prop="current_wrong_num" label="当前错题">
        <template #default="scope">
          {{ scope.row.current_wrong_num }}
        </template>
      </el-table-column>
      <el-table-column
        prop="revised_scoring_rate"
        label="订正得分率"
        :sortable="true"
      >
        <template #default="scope">
          <span style="color: #4ec680"
            >{{ handleRate(scope.row.revised_scoring_rate, 2) }}%
          </span>
        </template>
      </el-table-column>

      <el-table-column
        prop="revised_coverage"
        label="已订正/全部错题（覆盖率）"
        :sortable="true"
      >
        <template #default="scope">
          {{ scope.row.revised_num }} / {{ scope.row.current_wrong_num }} ({{
            handleRate(scope.row.revised_coverage, 2)
          }}%)
        </template>
      </el-table-column>
      <el-table-column
        prop="Overcome_coverage"
        label="已攻克/全部错题（覆盖率）"
        :sortable="true"
      >
        <template #default="scope">
          {{ scope.row.overcome_num }} / {{ scope.row.current_wrong_num }} ({{
            handleRate(scope.row.overcome_coverage, 2)
          }}%)
        </template>
      </el-table-column>
      <el-table-column
        prop="daily_question_count"
        label="日均重练"
        :sortable="true"
      >
        <template #default="scope">
          {{ Number(scope.row.average_daily.toFixed(2)) }}道
        </template>
      </el-table-column>
      <el-table-column prop="action" label="操作">
        <template #default="scope">
          <el-button link type="primary" @click="toPerson(scope.row)"
            >个性错题本</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref, watchEffect } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { getPracticeData } from '@/apis/assignment/index'
import { handleRate } from '../util'
import dayjs from 'dayjs'
import router from '@/router'
import { storeToRefs } from 'pinia'
import { useAuthStore } from '@/stores'
import { debounce } from '@/utils/debounce'

const props = defineProps({
  currentClass: {
    type: Array,
    default: () => [0, null]
  },
  stageId: Number,
  subjectId: Number,
  startTime: Object,
  endTime: Object,
  teacherId: String
})
const loading = ref(false)
const { userInfo } = storeToRefs(useAuthStore())
const processList = ref([
  {
    text: '订正得分率',
    num: 0,
    unix: '%',
    color: '#86C3FF'
  },
  {
    text: '订正覆盖率',
    num: 0,
    unix: '%',
    color: '#7CE299'
  },
  {
    text: '举一反三攻克率',
    num: 0,
    unix: '%',
    color: '#A1A4FF'
  },
  {
    text: '人/日均订正错题',
    num: 0,
    unix: '道',
    color: '#FF9B9B'
  }
])
const retrainSearch = ref({
  studentName: '',
  low_rate: undefined,
  high_rate: undefined
})
const dataList = ref([])
const filterList = ref([])

const getPracticeDataInfo = async () => {
  if (!props.currentClass?.length) return
  retrainSearch.value = {
    studentName: '',
    low_rate: undefined,
    high_rate: undefined
  }
  loading.value = true
  const res = await getPracticeData({
    school_id: userInfo.value.school_id,
    class_id: props.currentClass[1],
    class_type: String(props.currentClass[2]),
    subject_id: props.subjectId,
    start_time: props.startTime
      ? dayjs(props.startTime).startOf('day').unix()
      : null,
    end_time: props.endTime ? dayjs(props.endTime).endOf('day').unix() : null
  })
  loading.value = false
  const { all_wrong_avg_data, student_wrong_list } = res.data
  processList.value[0].num = handleRate(
    all_wrong_avg_data.revised_scoring_rate,
    2
  )
  processList.value[1].num = handleRate(all_wrong_avg_data.revised_coverage, 2)
  processList.value[2].num = handleRate(all_wrong_avg_data.take_author_rate)
  processList.value[3].num = Number(
    Number(all_wrong_avg_data.average_daily).toFixed(2)
  )
  dataList.value = student_wrong_list
  filterList.value = dataList.value
}

const onNameChange = () => {
  debounce(() => {
    filterList.value = dataList.value.filter(item =>
      item.student_name.includes(retrainSearch.value.studentName)
    )
  }, 500)
}

const onChangRate = () => {
  debounce(() => {
    filterList.value = dataList.value.filter(
      item =>
        item.revised_scoring_rate * 100 >=
          (retrainSearch.value.low_rate || 0) &&
        item.revised_scoring_rate * 100 <=
          (retrainSearch.value.high_rate || 100)
    )
  }, 500)
}
const toPerson = param => {
  router.push({
    name: 'wrongPersonWrong',
    query: {
      studentId: param.student_id,
      studentName: param.student_name,
      classId: props.currentClass[1],
      classType: props.currentClass[2],
      gradeNum: props.currentClass[3],
      startTime: props.startTime,
      endTime: props.endTime
    }
  })
}

watchEffect(() => {
  getPracticeDataInfo()
})
</script>

<style lang="less" scoped>
.retrain-statistics-container {
  height: 100%;
  padding: 30px 20px 20px 20px;
  background-color: #fff;
  .process-box {
    .process-item {
      gap: 12px;
      align-items: center;
    }
  }
  .retrain-search {
    gap: 20px;
    margin: 20px 0;
    .class-name {
      width: 220px;
      height: 30px !important;

      .el-input__wrapper {
        border-radius: 0;
        box-shadow: none;
        border: 1px solid #b7b8bb;

        .el-input__inner {
          font-size: 14px;

          &::placeholder {
            font-size: 14px;
          }
        }
      }
    }
    .right-rate {
      display: flex;
      align-items: center;
      border: 1px solid #b7b8bb;
      height: 30px;

      * {
        font-size: 14px;
      }

      .tip {
        padding: 0 10px;
        font-size: 14px;
        color: #333333;
        width: fit-content;
        white-space: nowrap;
        border-right: 1px solid #b7b8bb;
        height: 100%;
        line-height: 30px;
      }

      .separator {
        color: #b7b8bb;
      }

      .input-box {
        .el-input-number {
          width: 100px;
          height: 28px;

          :deep(.el-input__wrapper) {
            border-radius: 0;
            // border: 1px solid #b7b8bb;
            border-left: unset;
            border-right: unset;
            box-shadow: none;
          }
        }
      }
    }
  }

  .retrain-table {
    flex: 1;
    overflow-y: scroll;
    /* stylelint-disable ebag/selector-class-pattern */
    :deep(.cell) {
      line-height: 40px !important;
      text-align: center;

      .el-table__expand-icon {
        display: none;
      }
    }

    :deep(.caret-wrapper) {
      height: 12px;
    }

    :deep(.el-table__header) {
      .el-table__cell {
        background-color: #f2f4f9;
      }
    }
  }
}
</style>
